<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1 {
            width: 1000px;
            height: 500px;
            background-color: deeppink;
        }
        
        img {
            width: 160px;
        }
        
        .d1 div {
            display: inline-block;
            margin: 10px;
            padding: 10px;
            background-color: white;
        }
    </style>
</head>

<body>
    <button onclick="sy()">首页</button>
    <button onclick="gwc()">购物车</button>
    <div class="d1">

    </div>
    <h3>￥<span class="zong">0</span></h3>
    <button onclick="jz()">结算</button>
    <script src="./jq.js"></script>
    <script>
        var arr = [{
            id: 1,
            name: '带齿梳睫毛夹自然卷翘',
            img: "https://gju4.alicdn.com/tps/i4/2218090375779/O1CN01acXEvQ1sYpsJFxkU0_!!2218090375779.jpg",
            jia: 3,
            num: 1,
            is: false
        }, {
            id: 2,
            name: '鞋底贴鞋跟垫鞋子防滑',
            img: 'https://gju2.alicdn.com/tps/i3/2218430492737/O1CN01LW8m1r1W5b35jlepj_!!2218430492737.jpg',
            jia: 2,
            num: 1,
            is: false
        }, {
            id: 3,
            name: '高级鞋油无色通用皮鞋',
            img: 'https://img.alicdn.com/bao/upload/O1CN01hSWBy92MZEiCFNe2U_!!2215232749841-0-yinheaigc.jpg',
            jia: 2,
            num: 1,
            is: false
        }, {
            id: 4,
            name: '洗脸护腕擦汗吸汗运动',
            img: 'https://img.alicdn.com/bao/upload/O1CN01ls3U26225COG4MsGv_!!6000000007068-0-yinhe.jpg',
            jia: 2,
            num: 1,
            is: false
        }, {
            id: 5,
            name: '挖耳勺掏儿童采耳工具',
            img: 'https://img.alicdn.com/bao/upload/O1CN015JgIUY1nxxXrQvWWM_!!6000000005157-0-yinhe.jpg',
            jia: 1,
            num: 1,
            is: false
        }]
        var data = []
        var zong = 0
        var js = []
            // 渲染首页
        function xr() {
            arr.forEach(item => {
                $('.d1').append(`<div>
                <img src="${item.img}" alt="" onclick="xq(${item.id})">
                <p>${item.name}</p>
                <span>￥${item.jia}</span>
            </div>`)
            })
        }
        xr()
            // 详情
        function xq(id) {
            $('.d1').html('')
            var a = arr.find(item => item.id == id)
            $('.d1').append(`<div>
            <img src="${a.img}" alt="" onclick="xq(${a.id})">
            <p>${a.name}</p>
            <span>￥${a.jia}</span>
            <button onclick="jrgwc(${a.id})">加入购物车</button>
            <button onclick="fh()">返回</button>
        </div>`)
        }
        // 加入购物车
        function jrgwc(id) {
            var a = arr.find(item => item.id == id)
            var b = data.includes(a)
            if (b == false) {
                data.push(a)
                alert('添加成功')
            } else {
                alert('不可重复添加')
            }
        }
        // 返回首页
        function fh() {
            $('.d1').html('')
            xr()
        }
        // 渲染购物车
        function gwc() {
            $('.d1').html('')
            data.forEach(item => {
                $('.d1').append(`<div>
                <input type="checkbox" ${item.is ? 'checked' :''} onclick="jgjs(${item.id},${item.is})">
                <img src="${item.img}" alt="" onclick="xq(${item.id})">
                <p>${item.name}</p>
                <span>￥${item.jia}</span>
                <button onclick="jian(${item.id})">-</button>${item.num}<button onclick="jia(${item.id})">+</button>
            </div>`)
            })
        }
        // 价格计算
        function jgjs(id, is) {
            var a = data.find(item => item.id == id)
            a.is = event.target
            console.log(a);

            console.log(a.is);

            if (a.is == true) {
                zong += a.jia * a.num
            } else if (a.is == false) {
                zong -= a.jia * a.num
            }
            $('.zong').html('')
            $('.zong').append(zong)
        }
        // 数量加
        function jia(id, is) {
            var a = data.find(item => item.id == id)
            if (a.is == true) {
                zong += a.jia
            }
            a.num++
                $('.zong').html('')
            $('.zong').append(zong)
            gwc()
        }
        // 数量减
        function jian(id, is) {
            var a = data.find(item => item.id == id)
            if (a.num >= 2) {
                a.num--
                    if (a.is == true) {
                        zong -= a.jia
                    }
            }
            gwc()
            $('.zong').html('')
            $('.zong').append(zong)
        }
        // 结算
<<<<<<< HEAD
        function jz() {
            var a = data.filter(item => item.is == true)
            console.log(a);

            $('.d1').html('')
            a.forEach(item => {
                $('.d1').append(`<div><img src="${item.img}"><p>${item.num * item.jia}</p></div>`)
            })
        }

        function sy() {
            $('.d1').html('')
            xr()
        }
=======
            function jz(){
                localStorage.setItem('img',JSON.stringify(data))

                var a = data.filter(item => item.is == true)
                $('.d1').html('')
                a.forEach(item => {
                    $('.d1').append(`<div><img src="${item.img}"><p>${item.num * item.jia}</p></div>`)
                    
                })
            }
            function sy(){
                $('.d1').html('')
                xr()
            }
>>>>>>> 69fb7a666511dd869950d0762b0185c578b48ba8
    </script>
</body>

</html>